<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="h54"></div>
    <div id="qrcode" style="width: 100%; text-align: center;">
        <vue-qr :text="config.text" :size="330" :margin="10" :logoSrc="config.logo"></vue-qr>

        <div class="h54"></div>
        <el-button @click="copyShareLink" style="width: 90%; font-size: 20px; padding: 20px">复制二维码链接</el-button>

        <div class="h54"></div>
        <el-button @click="downloadImg" style="width: 90%; font-size: 20px; padding: 20px">下载二维码图片</el-button>
    </div>

</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import md5 from 'js-md5';

// 二维码组件
import VueQr from 'vue-qr/src/packages/vue-qr.vue'

// 复制粘贴组件
import Clipboard from 'clipboard'

// 定义Logo图片
// import Icon from '/images/avatar-01.jpg'

// //获取this对象
const { proxy } = getCurrentInstance()
// console.log(proxy)

// 获取个人资料信息
let business = proxy.$business
// console.log(business)

// 获取当前域名
const domain = location.origin
// console.log(domain)

// 获取用户头像
const icon = new URL(business.value.avatar_text, import.meta.url).href

// console.log(avatar)

// 身份识别 id+mobile 进行md5
const id = business.id
const mobile = business.mobile
const token = md5([id, mobile])
// console.log(token)

// 推广链接
const iurl = ref(domain + "/#/business/register?token=" + token)
// console.log(iurl)

// reactive 用于创建响应式对象
const config = reactive({
    // eslint-disable-next-line no-undef
    logo: icon,     // 默认二维码中间图片
    text: iurl       // 二维码内容,编码格式默认使用base64
})

// 复制二维码链接
const copyShareLink = () => {
    let clipboard = new Clipboard("#qrcode", {
        text: () => {
            //返回需要复制的字符串
            return config.value.text;
        },
    });
    clipboard.on("success", () => {
        clipboard.destroy();    // 释放内存
        proxy.$success('链接复制成功')
    });
    clipboard.on("error", () => {
        clipboard.destroy();    // 释放内存
        proxy.$fail('链接复制失败')
    });
};

// 下载二维码图片
let downloadImg = () => {
    var oQrcode = document.querySelector("#qrcode img");
    var url = oQrcode.src;
    var a = document.createElement("a");
    var event = new MouseEvent("click");
    // 自定义下载二维码图片的名字
    a.download = "download二维码";
    // url地址
    a.href = url;
    // 进行下载
    a.dispatchEvent(event);
}

</script>